<template>
  <visual-data-box title="事件处理统计">
    <div slot="content"
         class="chart-box"
         ref="JChart" />
  </visual-data-box>
</template>

<script>
import { reqPost } from 'global/axios';
import { baseCircle } from 'common/js/echart';
import VisualDataBox from '../common/VisualDataBox';

export default {
  components: {
    'visual-data-box': VisualDataBox,
  },

  async mounted() {
    let { status, result } = await reqPost({
      url: '/emergency/report/statchiefnum',
    });

    if (status) {
      let data = [];
      let legend = [];

      result.map(({ _id, num }) => {
        data.push({
          value: num,
          name: _id,
        });
        legend.push(_id);
      });

      baseCircle(this.$refs.JChart, '事件处理统计', legend, data);
    }
  },
};
</script>

<style lang="less" scoped>
.chart-box {
  width: 626px;
  height: 250px;
  padding: 16px;
}
</style>